<template>
  <el-form ref="form"
           label-width="110px">
    <el-form-item v-show="visible('receiptSignTime')"
                  label="复核签收时间"
                  prop="receiptSignTime">
      <el-date-picker type="datetime"
                      :format="dateFormat"
                      placeholder="选择日期时间"
                      :value="receipt.receiptSignTime"
                      :picker-options="receiptSignPickerOptions"
                      :clearable="false"
                      popper-class="no-atTheMoment"
                      @input="handleInput('receiptSignTime', arguments[0])" />
    </el-form-item>
    <el-form-item label="回单日期"
                  prop="receiptTime">
      <el-date-picker type="datetime"
                      class="data_picker"
                      :format="dateFormat"
                      placeholder="选择日期时间"
                      :value="receipt.receiptTime"
                      :picker-options="receiptPickerOptions"
                      :clearable="false"
                      popper-class="no-atTheMoment"
                      @input="handleInput('receiptTime', arguments[0])" />
    </el-form-item>
    <el-form-item label="是否补单"
                  prop="receiptType">
      <el-radio :value="receipt.receiptType"
                :label="0"
                @input="handleInput('receiptType', arguments[0])">无</el-radio>
      <el-radio :value="receipt.receiptType"
                :label="1"
                @input="handleInput('receiptType', arguments[0])">补单</el-radio>
    </el-form-item>
    <el-form-item v-show="visible('receiptDesc')"
                  label="回单说明"
                  prop="receiptDesc">
      <el-input type="textarea"
                maxlength="200"
                show-word-limit
                :value="receipt.receiptDesc"
                @input="handleInput('receiptDesc', arguments[0])" />
    </el-form-item>
    <el-form-item v-show="visible('syncUpAttachments')"
                  label="同步回单照片"
                  prop="syncUpAttachments">
      <div class="tips">
        <el-checkbox v-if="receiptPics.length"
                     v-model="allCheck"
                     :indeterminate="isIndeterminate">全选</el-checkbox>
        &nbsp;&nbsp;{{syncPicsTip}}
      </div>
      <thumbnails :images="receiptPics"
                  :checkable="true"
                  :all-check="allCheck"
                  @check="handleCheckedImages" />
    </el-form-item>
  </el-form>
</template>

<script>
import Thumbnails from "@basic/Thumbnails.vue";
import { returnCompareTime } from "@/libs/util.js";
export default {
  name: "ReceiptForm",
  components: {
    Thumbnails
  },
  props: {
    value: {
      type: Object
    },
    hiddenFields: Array,
    waybillType: Number,
    isRootWaybill: Number,
    receiptPics: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      receiptSignTimeStart: null,
      dateFormat: "yyyy-MM-dd HH:mm",
      allCheck: false,
      isIndeterminate: false
    };
  },
  computed: {
    receipt () {
      return this.value || {};
    },
    receiptSignTime () {
      return this.receipt.receiptSignTime;
    },
    receiptTimeStart () {
      return new Date(
        new Date(this.receiptSignTime).setDate(
          new Date(this.receiptSignTime).getDate() - 1
        )
      );
    },
    receiptSignPickerOptions () {
      return {
        disabledDate: (time) => {
          return time.getTime() <= this.receiptSignTimeStart?.getTime();
        }
      };
    },
    receiptPickerOptions () {
      return {
        // 时间选择限制 收货时间
        disabledDate: (time) => {
          return time.getTime() <= this.receiptTimeStart.getTime();
        }
      };
    },
    visible () {
      return name => {
        if (!this.hiddenFields || this.hiddenFields.length === 0) {
          return true;
        }

        return !this.hiddenFields.includes(name);
      }
    },
    syncPicsTip () {
      if (this.waybillType != 10) {
        //说明是承运方运单
        return "(勾选照片同步至本方发货方运单上)";
      } else if (this.isRootWaybill == 1) {
        //发货方运单（原始运单）
        return "(勾选照片同步至订单)";
      } else {
        //发货方运单（普通运单）
        return "(勾选照片同步至发货方系统的承运方运单上)";
      }
    },
  },
  watch: {
    receiptSignTime () {
      this.receipt.receiptTime = null;
    }
  },
  created () {
    this.receiptSignTimeStart = new Date(
      new Date(this.receiptSignTime).setDate(
        new Date(this.receiptSignTime).getDate() - 30
      )
    );
  },
  methods: {
    handleInput (name, value) {
      if (name === 'receiptTime' && this.receipt.receiptSignTime) {
        if (!returnCompareTime(
          new Date(this.$moment(value).format("YYYY-MM-DD 23:59:59")),
          new Date(this.receipt.receiptSignTime)
        )) {
          return false;
        }
      }
      if (name === 'receiptDesc') {
        value = value.trim();
      }
      this.receipt[name] = value;
      if (value && (name === "receiptSignTime" || name === "receiptTime")) {
        this.receipt[name] = this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
      }

      this.$emit("input", { ...this.receipt });
    },
    handleCheckedImages (images) {
      const selectedImages = images
        .filter((file) => file.checked)
        .map(({ name, url }) => {
          return {
            name,
            url,
            type: 1
          };
        });
      if (!selectedImages.length) {
        this.allCheck = false;
        this.isIndeterminate = false;
      }
      if (selectedImages.length === this.receiptPics.length) {
        this.allCheck = true;
        this.isIndeterminate = false;
      }
      if (selectedImages.length && selectedImages.length != this.receiptPics.length) {
        this.isIndeterminate = true;
      }
      this.$emit("input", { ...this.receipt, syncUpAttachments: selectedImages });
    },
    validate () {
      if (this.receipt.receiptTime < this.receipt.receiptSignTime) {
        this.$message({ type: "error", message: "回单时间不能早于签收时间" });
        this.receipt.receiptTime = null;
        return;
      }
      return this.$refs.form.validate();
    }
  }
};
</script>
<style scoped>
.data_picker >>> .el-picker-panel__link-btn {
  display: none;
}
.tips {
  font-size: 12px;
  color: var(--prev-color-text-silvergrey);
}
/* .no-atTheMoment
  .el-picker-panel__footer
  .el-button--text.el-picker-panel__link-btn {
  display: none !important;
} */
</style>
